<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function()
    {
        //点击按钮以后弹出一个内容
        var btn01=document.getElementById("btn01");
        //使用 对象.事件=函数的形式绑定响应函数
        //他只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，不然会出现覆盖

        /*
        btn01.onclick=function()
        {
            console.log("1");
        }
        //为btn01绑定第二个单击响应函数，这样会造成函数覆盖
        btn01.onclick=function()
        {
            console.log("2");
        }
        */

        //addEventListener()
        //通过这个方法也可以为元素绑定响应函数
        //参数： 1.事件的字符串，要把on舍去 2.回调函数，当事件触发时，该函数会被调用
        // 3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
        //使用它可以同时为一个元素的相同事件同时绑定多个响应函数
        //当事件被触发时，响应函数将会按照函数的绑定顺序执行
        btn01.addEventListener("click",function()
        {
            console.log(123);
        },false);

        btn01.addEventListener("click",function()
        {
            console.log(456);
        },false);
    };
    </script>
</head>
<body>
    <button id="btn01">点我一下</button>
</body>
</html>